<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入Bootstrap 5稳定版的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Bootstrap 5稳定版的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container" id="app">
    <ul>
      <li v-for="(item,index) in  list" :key="index">姓名:{{item.name}}--年龄:{{item.age}}--索引:{{index}}</li>
    </ul>

    <h1>计算属性总计:{{totalSum}}</h1>
    <h1>方法总计:{{getotal()}}</h1>
  </div>

</body>
<script>
  new Vue({
    el: '#app',
    data: {

      message: 'Hello Vue.js!',
      list: [{ name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 }]
    },
    methods: {
      getotal () {
        var sum = this.list.reduce((sum, item) => sum + item.age, 0);
        return sum;
      }
    },
    computed: {
      totalSum () {
        var sum = this.list.reduce((sum, item) => sum + item.age, 0);
        return sum;
      },

      // 计算属性的完整写法
      sun: {
        get () {
          var sum = this.list.reduce((sum, item) => sum + item.age, 0);
          return sum;
        }
        ,
        set (value) {
          console.log('set方法被调用了')
        }
      }
    }
  })
</script>

</html>